import popupInfo from "../../components/popupInfo.js";
import {getAllReplies, getTopicFromId, getUserOrDoctor} from "../utils/common_network.js";
import {dateTimeFormat} from "../../date_utils.js";
import {ResultCode} from "../../network.js";


export default {
    components: {
        'popup-info': popupInfo,
    },
    props: {
        id: String,
        pageNum: {
            type: String, default: 1
        }
    },
    setup(props) {
        const router = VueRouter.useRouter();
        const popup = Vue.ref(null);
        const user = Vue.ref({name: ""});
        const replyPage = Vue.ref({});
        const topic = Vue.ref({});
        const replyInfo = Vue.ref("");

        Vue.onMounted(async () => {
            await getUserOrDoctor(popup, () => {
                router.push('/');
            }, user);
            getTopicFromId(props.id, topic);
            getAllReplies(props.id, props.pageNum, replyPage);
        })

        function prevPage() {
            router.push('/topic_reply/' + props.id + "/" + (Number(props.pageNum) - 1));
        }

        function nextPage() {
            router.push('/topic_reply/' + props.id + "/" + (Number(props.pageNum) + 1));
        }

        function onSubmit() {
            axios.post("/topic/reply", {topicId: props.id, content: replyInfo.value})
                .then(r => {
                    console.log(r);
                    if ((r.data.code & ResultCode.FAIL) === ResultCode.FAIL) {
                        popup.value.show(r.data.message);
                        return r;
                    }
                    const refresh = () => router.go(0);
                    popup.value.onConfirm = refresh;
                    popup.value.onCancel = refresh;
                    popup.value.show("发表成功");
                });
        }

        const gotoPageNum = Vue.ref(undefined);

        function gotoPage(i) {
            router.push('/topic_reply/' + props.id + "/" + i);
        }

        return {
            router, popup, user, replyPage, prevPage, nextPage,
            topic, dateTimeFormat, onSubmit, replyInfo, gotoPageNum,
            gotoPage
        }
    },
    template: `
<div style="width: 100%;height: 100%;position: fixed;z-index: -10;
    background-image: url('/images/background/topic_reply.jpg');
    background-size: 100% 100%;"></div>
<div class="container nss-font" style="height: 100%; padding-left: 0; padding-right: 0;">
    <popup-info ref="popup"></popup-info>
    <div class="row" style="height: 100%;">
        <div class="col-md-2">
        </div>
        <div class="col-md-8" style="height: 100%;background: rgb(250, 253, 255);
            border: 1px solid;padding: 0;overflow-y: auto;">
            <div style="width: 100%; height: 60px; line-height: 60px; font-size: 26px;
             padding-left: 20px; padding-right: 20px;border-bottom: 1px solid;">
                姓名:{{user.name}}
            </div>
            <div style="width: 100%; padding: 10px; border-bottom: 1px solid;
                font-size: 18px; text-align: center;" v-show="replyPage.pages > 0">
                <button :disabled="replyPage.current === 1" 
                    @click="prevPage">
                    上一页
                </button>
                第{{replyPage.current}}页&nbsp;共{{replyPage.pages}}页
                <input type="number" style="width: 50px;margin-right: 10px;" v-model="gotoPageNum"/>
                <button style="margin-right: 10px;"
                    @click="gotoPage(Number(gotoPageNum))">
                    跳转
                </button>
                <button :disabled="replyPage.current === replyPage.pages" 
                    @click="nextPage">
                    下一页
                </button>
            </div>
            <div style="padding-left: 20px; padding-top: 10px; padding-bottom: 10px;
                border-bottom: 1px solid;font-size: 30px;" class="my-font">
                标题:{{topic.title}}
            </div>
            <div class="row" style="border-bottom: 1px solid;margin: 0;">
                <div style="font-size: 18px;text-align: center;
                    padding-top: 10px;padding-bottom: 10px;" 
                    class="col-md-4">
                    问题内容<br>
                    {{dateTimeFormat(topic.createTime)}}
                </div>
                <div style="font-size: 18px;text-align: left;padding-bottom: 10px;
                    padding-top: 10px;"
                 class="col-md-8">
                    {{topic.content}}
                </div>
            </div>
            <div class="row" style="border-bottom: 1px solid;margin: 0;height: auto;"
                v-for="(item, index) in replyPage.records">
                <div style="font-size: 18px;text-align: center;
                    padding-top: 10px;padding-bottom: 10px;height: inherit;"
                    class="col-md-4">
                    第{{replyPage.size * (replyPage.current - 1) + index + 1}}条<br>
                    {{dateTimeFormat(item.createTime)}}
                </div>
                <div style="font-size: 18px;text-align: left;padding-top: 10px;padding-bottom: 10px;"
                 class="col-md-8">
                    {{item.content}}
                </div>
            </div>
            <div style="width: 100%; padding: 10px; border-bottom: 1px solid;
                font-size: 18px; text-align: center;" v-show="replyPage.pages > 0">
                <button :disabled="replyPage.current === 1" 
                    @click="prevPage">
                    上一页
                </button>
                第{{replyPage.current}}页&nbsp;共{{replyPage.pages}}页
                <input type="number" style="width: 50px;margin-right: 10px;" v-model="gotoPageNum"/>
                <button style="margin-right: 10px;"
                    @click="gotoPage(Number(gotoPageNum))">
                    跳转
                </button>
                <button :disabled="replyPage.current === replyPage.pages" 
                    @click="nextPage">
                    下一页
                </button>
            </div>
            <div style="width: 100%;height: 400px;padding: 20px 20px;">
                <div style="font-size: 18px;" class="my-font">
                    发表回复
                </div>
                <textarea style="resize: none;width: 100%;margin-top: 10px;
                    height: 270px;font-size: 18px;" v-model="replyInfo"
                    ></textarea>
                <button style="background: rgb(197, 228, 251);font-size: 18px;
                    border-radius: 5px;border: 1px solid;margin-top: 10px;"
                    @click="onSubmit">
                    发表
                </button>
            </div>
        </div>
        <div class="col-md-2">
        </div>
    </div>
</div>`
}